<template>
  <div class="form-layer">
    <el-form class="addEditFormPatient" ref="userInfoForm" :model="userInfoForm" :rules="RULES"  label-position="left" label-width="120px" @submit.native.prevent>
      <el-form-item label="用户名" prop="account">
        <el-input placeholder="" type="text" style="width:260px;" disabled v-model.trim="userInfo.name"></el-input>
      </el-form-item>
      <el-form-item label="旧密码" prop="oldPwd">
        <el-input placeholder="请输入旧密码" type="password" style="width:260px;" v-model.trim="userInfoForm.oldPwd"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPwd">
        <el-input placeholder="请输入新密码" type="password" style="width:260px;" v-model.trim="userInfoForm.newPwd"></el-input>
      </el-form-item>
      <el-form-item label="确认新密码" prop="confirmPwd">
        <el-input placeholder="请再次输入新密码" type="password" style="width:260px;"  v-model.trim="userInfoForm.confirmPwd"></el-input>
      </el-form-item>
    </el-form>
    <div class="baseFormBtns" id="baseFormBtns" style="float:right;">
      <el-button  @click="closeAddEdit">取消</el-button>
      <el-button  type="primary" @click="modifyPwd">确定</el-button>
    </div>
  </div>

  
</template>

<script>
  import {queryUserManagePage, editPassWord, addUser,delUser} from '@/depends/api/user'
  import {deepCopy} from '@/utils/tools/tools'
  import {mapGetters} from 'vuex'
  import {KEYS} from "./component/keys";
  export default {
    data() {
      const validatePassCheck = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次确认密码'));
        } else if (value !== this.userInfoForm.newPwd) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        userInfoForm: {
          newPwd: '',
          confirmPwd:''
        },
        RULES:{
          'oldPwd':[{ required: true, message: '请输入旧密码', trigger: 'blur' }],
          'newPwd':[{ required: true, message: '请输入新密码', trigger: 'blur' }],
          'confirmPwd':[{ required: true, message: '请输入确认密码', trigger: 'blur' },{ validator: validatePassCheck, trigger: 'blur' }]
        },
        userType:1,
        userInfo:{},
      };
    },
    computed:{
      ...mapGetters('user', ['getUserInfo']),
    },
    created() {
      this.userType = this.getUserType;
      this.userInfo = this.getUserInfo;
     // this.userInfo = this.getUser;
    },
    mounted() {

    },
    methods:{
      editFormPatient (a) {
        this.pop.pop1.flag = true
        this.pop.pop1.title = '编辑患者'
        this.$nextTick(() => {
          for (let i in this.pop.pop1.form) {
            this.pop.pop1.form[i] = a[i]
          }
        })
      },
      isPass(form) {
        return new Promise((reslove, reject) => {
          this.$refs[form].validate((valid) => {
            reslove(valid);
          });
        });
      },
      closeAddEdit () {
        this.$refs.userInfoForm.resetFields();
        //this.$router.back();
        this.$router.go(-1);
      },
      async modifyPwd () {
        let isPass = await this.isPass('userInfoForm');
        if (!isPass) {return}
        let params = deepCopy(this.userInfoForm);
        this.userInfo.password = params.newPwd;
        this.userInfo.passwordOld = params.oldPwd;

        if (this.userInfo.id) {
          editPassWord(this.userInfo).then(res => {
            if (res.data.status !== 200) { return }
            this.$message.success('密码修改成功!')
            this.$refs.userInfoForm.resetFields();
          })
        }
      },


    },
    beforeDestroy() {
    },

  }
</script>

<style scoped lang="less">
  .form-layer{
    padding:16px;
    width:412px;
  }

</style>